import React from 'react';
import { motion } from 'framer-motion';
import { CheckCircle2, Circle, Trash2, Edit3, Calendar, Flag, Clock } from 'lucide-react';
import { format, isToday, isTomorrow, isPast } from 'date-fns';
import { zhCN } from 'date-fns/locale';

const TodoItem = ({ todo, index, onToggleComplete, onEdit, onDelete, darkMode }) => {
  const getPriorityColor = (priority) => {
    switch (priority) {
      case 'high': return 'text-red-400 bg-red-500/20';
      case 'medium': return 'text-yellow-400 bg-yellow-500/20';
      case 'low': return 'text-green-400 bg-green-500/20';
      default: return 'text-gray-400 bg-gray-500/20';
    }
  };

  const getPriorityText = (priority) => {
    switch (priority) {
      case 'high': return '高';
      case 'medium': return '中';
      case 'low': return '低';
      default: return '中';
    }
  };

  const getCategoryColor = (category) => {
    switch (category) {
      case 'work': return 'bg-blue-500/20 text-blue-400';
      case 'personal': return 'bg-purple-500/20 text-purple-400';
      case 'shopping': return 'bg-green-500/20 text-green-400';
      case 'health': return 'bg-red-500/20 text-red-400';
      case 'study': return 'bg-yellow-500/20 text-yellow-400';
      default: return 'bg-gray-500/20 text-gray-400';
    }
  };

  const getCategoryText = (category) => {
    switch (category) {
      case 'work': return '工作';
      case 'personal': return '个人';
      case 'shopping': return '购物';
      case 'health': return '健康';
      case 'study': return '学习';
      default: return '通用';
    }
  };

  const formatDueDate = (dateString) => {
    if (!dateString) return null;
    
    const date = new Date(dateString);
    if (isToday(date)) return '今天';
    if (isTomorrow(date)) return '明天';
    return format(date, 'MM月dd日', { locale: zhCN });
  };

  const isDueSoon = (dateString) => {
    if (!dateString) return false;
    const date = new Date(dateString);
    const now = new Date();
    const diffHours = (date - now) / (1000 * 60 * 60);
    return diffHours <= 24 && diffHours > 0;
  };

  const isOverdue = (dateString) => {
    if (!dateString) return false;
    return isPast(new Date(dateString)) && !isToday(new Date(dateString));
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20, scale: 0.95 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      exit={{ opacity: 0, y: -20, scale: 0.95 }}
      transition={{ delay: index * 0.05 }}
      className={`todo-item ${todo.completed ? 'todo-completed' : ''} ${
        todo.priority === 'high' ? 'priority-high' : 
        todo.priority === 'medium' ? 'priority-medium' : 
        'priority-low'
      }`}
    >
      <div className="flex items-start gap-3">
        {/* 完成状态按钮 */}
        <motion.button
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.9 }}
          onClick={() => onToggleComplete(todo)}
          className={`mt-1 transition-colors ${
            todo.completed 
              ? 'text-green-400 hover:text-green-300' 
              : 'text-white/40 hover:text-white/60'
          }`}
        >
          {todo.completed ? (
            <CheckCircle2 className="w-5 h-5" />
          ) : (
            <Circle className="w-5 h-5" />
          )}
        </motion.button>

        {/* 内容区域 */}
        <div className="flex-1 min-w-0">
          <div className="flex flex-wrap items-center gap-2 mb-2">
            <h3 className={`font-medium ${
              todo.completed 
                ? 'line-through text-white/50' 
                : darkMode ? 'text-white' : 'text-gray-800'
            }`}>
              {todo.title}
            </h3>
            
            {/* 优先级标签 */}
            <span className={`px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(todo.priority)}`}>
              <Flag className="w-3 h-3 inline mr-1" />
              {getPriorityText(todo.priority)}优先级
            </span>
            
            {/* 分类标签 */}
            <span className={`px-2 py-1 rounded-full text-xs font-medium ${getCategoryColor(todo.category)}`}>
              {getCategoryText(todo.category)}
            </span>
          </div>

          {/* 描述 */}
          {todo.description && (
            <p className={`text-sm mb-2 ${
              todo.completed 
                ? 'line-through text-white/40' 
                : darkMode ? 'text-white/70' : 'text-gray-600'
            }`}>
              {todo.description}
            </p>
          )}

          {/* 截止日期 */}
          {todo.due_date && (
            <div className={`flex items-center gap-1 text-xs ${
              isOverdue(todo.due_date) 
                ? 'text-red-400' 
                : isDueSoon(todo.due_date) 
                  ? 'text-yellow-400' 
                  : darkMode ? 'text-white/60' : 'text-gray-500'
            }`}>
              <Calendar className="w-3 h-3" />
              <span>截止: {formatDueDate(todo.due_date)}</span>
              {isOverdue(todo.due_date) && (
                <span className="text-red-400 font-medium">已逾期</span>
              )}
              {isDueSoon(todo.due_date) && !isOverdue(todo.due_date) && (
                <span className="text-yellow-400 font-medium">即将到期</span>
              )}
            </div>
          )}

          {/* 创建时间 */}
          <div className={`text-xs mt-1 ${darkMode ? 'text-white/40' : 'text-gray-400'}`}>
            <Clock className="w-3 h-3 inline mr-1" />
            创建于 {format(new Date(todo.created_at), 'MM月dd日 HH:mm', { locale: zhCN })}
          </div>
        </div>

        {/* 操作按钮 */}
        <div className="flex gap-2">
          <motion.button
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => onEdit(todo)}
            className="p-2 rounded-lg bg-white/10 hover:bg-white/20 text-white/60 hover:text-white transition-colors"
          >
            <Edit3 className="w-4 h-4" />
          </motion.button>
          <motion.button
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => onDelete(todo.id)}
            className="p-2 rounded-lg bg-white/10 hover:bg-red-500/20 text-white/60 hover:text-red-400 transition-colors"
          >
            <Trash2 className="w-4 h-4" />
          </motion.button>
        </div>
      </div>
    </motion.div>
  );
};

export default TodoItem;